<template>
	<view>
		<view class="plant-head">
			<view class="flex"><view>{{orderData.VehiclePlateNo||""}}</view><view style="margin-left: 14upx;">{{orderData.VehicleType||""}}</view></view>
			<view class="car-info flex"><view>{{orderData.Mil}}公里</view></view>
		</view>
		<!-- 标签 顶部选择-->
		<view class="tab-bar flex" >
			<tab-bar style="width: 100%;" :tabBars="tabBar.tabBars" :tabIndex="tabBar.tabIndex" @tapTab="tapTab"></tab-bar>
		</view>
		<view class="content-box flex">
			<!-- 标签左边导航 -->
			<view class="left-nav">
				<scroll-view scroll-y class="scroll-view" >
					<block v-for="(item,index) in rightList" :key='index'>
						<view class="nav-text f-center zcRelative" @tap="do_selectNav2(item,index)" :class="navIndex2==index?'nav-select':''"> {{item.Class2}} <view class="count f-center" v-if="item.SelectNumber>0">{{item.SelectNumber}}</view></view>
					</block>
				</scroll-view>
			</view>
			<!-- 标签右边选择 -->
			<view class="right-select flex1">
				<scroll-view scroll-y class="scroll-view">
					<!-- <block v-for="(item2,index2) in rightList" :key="index2"> -->
						<view class="data-wrap">
							<view class="data-list">
								<!-- <view class="data-title">{{item2.Class2}}</view> -->
								<block v-for="(item,index) in rightList2" :key="index">
									<view class="data-check f-side" @tap="do_select(item)">
										<view class="check-value zcOverflow3">{{item.Class3}}</view>
										<view class="iconfont icon-gouxuan11" :class="item.isSelect?'isSelect':''"></view>
									</view>
								</block>
							</view>
						</view>
					<!-- </block> -->

				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	import tabBar from "../../components/tab-bar/tab-bar.vue"
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				btn_disabled:false,
				navIndex:0,
				navList:[],
				// ItemModelSN:'RECEPTIONCAR_DAY-759DFDFC-897D-4D3B-BC4C-4CC51757A410',
				reqClass1:[],
				rightList:[],
				allSelect:[], //缓存右侧所有数据
				// orderData:{}, //上个页面传过来的数据
				saveStatus:'', //判断提交表单方式
				carInfoType:'' ,//判断是接待还是服务进来此页面的
				VehicleInfoSN:'' ,//用于保存后返回上一页使用
				carSN:' ' ,//上页面传过来
				tabBar:{
					tabIndex:0,
					tabBars:[
						{	name:'开单'},
						{name:'车辆周期列表'},
						{name:'卡券'},
						{name:'消费历史'},
					]
				},
				rightList2:'',
				navIndex2:0
			}
		},
		props:{
			orderData:Object,
			cycleEditData:Object
		},
		created(){
			_this = this;
			_this.getOnlySelectItemModelClass1();
		},
		onLoad(e){
			// console.log('页面参数 = ',e);
			// if(e.SN){
			// 	_this.carSN = e.SN;
			// 	_this.orderData = JSON.parse(e.orderData);
			// 	_this.carInfoType = e.type;
			// 	_this.VehicleInfoSN = e.VehicleInfoSN
			// };
			// console.log('_this.orderData ',_this.orderData );
			// if(	_this.orderData){
			// 	_this.orderData.items.forEach((item,index)=>{
			// 	let _model = new _this.SelectModel(item.ItemModelSN)
			// 	 _this.reqClass1.push(_model)
			// })
			//_this.getSelectItemModelClass1(_this.reqClass1);
			_this.getOnlySelectItemModelClass1();
			// }

		},
		// onUnload(){
		// 	console.log("页面离开")
		// 	uni.setStorageSync('orderData', JSON.stringify(_this.orderData));
		// },
		methods: {
			do_select(item){ //标签选择
			  _this.$emit("get_select",item)
			},
			getOnlySelectItemModelClass1(reqClass){  //进场请求左边列表
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: 'getOnlySelectItemModelClass1',
						Data: {
						}
					},
					Callback:_this.cb_getOnlySelectItemModelClass1,
					Scope: _this
				})
			},
			cb_getOnlySelectItemModelClass1(resJson,scope){ 
				 	console.log("服务左边列表",resJson)
					if(resJson.success){
						_this.navList = resJson.data;
						_this.tabBar.tabBars = resJson.data;
						_this.tabBar.tabBars.forEach((item,index)=>{  //添加一个属性判断是否是首次加载
						_this.$set(item,"name",item.Class1)
							if(index == 0){
								_this.$set(item,"isFirst",false)
							}else{
								_this.$set(item,"isFirst",true)
							}
						})
						_this.getOnlySelectItemModelClass2(_this.navList[0].Class1)
					}else{
							uni.showModal({
								title:'温馨提示',
								content: resJson.msg,
								showCancel:false
							})
					}
			},
						getOnlySelectItemModelClass2(Class1){  //请求右边选择列表
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: 'getOnlySelectItemModelClass2',
						data: {
							Class1:Class1
						}
					},
					Callback:_this.cb_getOnlySelectItemModelClass2,
					Scope: _this
				})
			},
			cb_getOnlySelectItemModelClass2(resJson,scope){ //获取右边列表选择
				 	console.log("服务右边列表",resJson)
					if(resJson.success){
						_this.rightList = resJson.data;  
						 _this.rightList2 = _this.rightList[0].childs
					}else{
						uni.showModal({
							title:'温馨提示',
							content: resJson.msg,
							showCancel:false
						})
					}
			},
			do_selectNav2(item,index){
			
				_this.navIndex2 = index
				_this.rightList2 = item.childs
			},
		tapTab(e){
			_this.navIndex2 = 0;
			_this.navIndex = e;
				_this.tabBar.tabIndex = e;
				console.log(_this.tabBar);
				console.log(_this.tabBar.tabBars[e]);
				_this.getOnlySelectItemModelClass2(_this.navList[e].Class1)
				// _this.do_selectNav(_this.tabBar.tabBars[e],e)
			},
		 SelectModel(ItemModelSN,Class3,Class2,Class1){ //构造函数，创建提交的选中对象
				this.ItemModelSN = ItemModelSN;
				this.Id ='';
				this.Class3 = Class3||'';
				this.Class2 = Class2||'';
				this.Class1 = Class1||''
			},
			do_submit(item){
				switch(item){
					case "save":
					if(_this.carInfoType == 'metting'){
							_this.saveStatus = "doSaveReception_Day"
					}else{
						_this.saveStatus = "doSave_RepairCar"
					}
					_this.btn_disabled = true
					_this.doSaveReception_Day(_this.saveStatus);
					break;
					case "sureOrder":
					console.log("确认开单");
					_this.saveStatus="doSave_Repair"
					uni.showModal({
						title: '温馨提示',
						content: '请确认是否确定开单！',
						success: res => {
							if (res.confirm) {
									console.log('用户点击确定');
							 // _this.doSaveReception_Day(_this.saveStatus);;
							} else if (res.cancel) {
									console.log('用户点击取消');
							}
						}
					});
					break;
				}
			},
			doSaveReception_Day(action){  //开单保存
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: action,
						Data: {
							SN:_this.carSN,
							obj:_this.orderData
						}
					},
					Callback:_this.cb_doSaveReception_Day,
					Scope: _this
				})
			},
			cb_doSaveReception_Day(resJson,scope){
				 	console.log("开单保存",resJson)
					if(resJson.success){
						// let _title="";
						// if(_this.saveStatus=="doSaveReception_Day"){
						// 	_title = "保存成功！"
						// }else{
						// 	_title = "确认开单成功！"
						// }
						uni.showToast({
							title:"保存成功!",
						});
						setTimeout(()=>{
						uni.navigateBack();
						_this.btn_disabled = false
						},1200)
					}else{
						_this.btn_disabled = false
							uni.showModal({
								title:'温馨提示',
								content: resJson.msg,
								showCancel:false
							})
					}
			},

			getSelectItemModelClass2(reqClass){  //请求右边选择列表
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: 'getSelectItemModelClass2',
						Data: reqClass
					},
					Callback:_this.cb_getSelectItemModelClass2,
					Scope: _this
				})
			},
			cb_getSelectItemModelClass2(resJson,scope){ //获取右边列表选择
				 	console.log("服务右边列表",resJson)
					if(resJson.success){
						_this.rightList = resJson.data;
						// _this.rightList.forEach((item)=>{
						// 	
						// })
						_this.allSelect[_this.navIndex] = resJson.data;
          _this.rightList2 = _this.rightList[0].childs
					}else{
						uni.showModal({
							title:'温馨提示',
							content: resJson.msg,
							showCancel:false
						})
					}
			},
			getSelectItemModelClass1(reqClass){  //进场请求左边列表
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: 'getSelectItemModelClass1',
						Data: {
							obj:reqClass
						}
					},
					Callback:_this.cb_getSelectItemModelClass1,
					Scope: _this
				})
			},
			cb_getSelectItemModelClass1(resJson,scope){ 
				 	console.log("服务左边列表",resJson)
					if(resJson.success){
						_this.tabBar.tabBars = resJson.data;
						_this.tabBar.tabBars.forEach((item,index)=>{  //添加一个属性判断是否是首次加载
						_this.$set(item,"name",item.Class1)
							if(index == 0){
								_this.$set(item,"isFirst",false)
							}else{
								_this.$set(item,"isFirst",true)
							}
						})
						_this.allSelect = new Array(_this.tabBar.tabBars.length)
						let _resClass={};
						_resClass.class1 = _this.tabBar.tabBars[0].Class1;
						_resClass.obj = _this.reqClass1;
						console.log("_this.tabBar",_this.tabBar);
						_this.getSelectItemModelClass2(_resClass)
					}else{
							uni.showModal({
								title:'温馨提示',
								content: resJson.msg,
								showCancel:false
							})
					}
			},
			do_selectNav(item,index){ //左边选择
				console.log(index)
				if(item.isFirst){  //如果是第一次选择左边导航就请求后台，不是第一次点击就取缓存
				let _resClass={};
				_resClass.class1 = item.Class1;
				_resClass.obj = _this.reqClass1;
				_this.getSelectItemModelClass2(_resClass)
				item.isFirst = false
				}else{
					_this.rightList = _this.allSelect[index];
          _this.rightList2 = _this.rightList[0].childs
				}
			}
		}
	}
</script>

<style>
.plant-head{
	height: 120upx;
	background-color: #50ADFD;
	color: #fff;
	padding-left: 20upx;
}
.plant-head>view:first-child{
	font-size: 34upx;
	font-weight: 520;
	height: 52upx;
	line-height: 45upx;
}
.car-info{
	height: 40upx;
	line-height: 40upx;
}
.car-info .plant-time{
	margin-left: 40upx;
	position: relative;
}
.car-info .plant-time:before{
	content: '';
	height: 20upx;
	width: 1upx;
	position: absolute;
	left: -19upx;
	top:15upx;
	background-color: #fff;
}
.plant-bottom{
	height: 100upx;
	position: fixed;
	bottom: 0;
	width: 100%;
}
.plant-bottom>button{
	width: 100%;
	box-sizing: border-box;
	background: #50ADFD;
	border-radius: 0;
	color: #fff;
}
/* .plant-bottom>button:first-child{
	background-color: #E6E6E6;
	color: #333;
	border-left: 1upx solid #D8D8D8;
	border-top: 1upx solid #D8D8D8;
} */
/* 内容 */
.left-nav{
	flex: 0 0 180upx;
	background-color: #F0F0F0;
	height: 100%;

}
.left-nav .scroll-view,.right-select,.right-select .scroll-view{
 height: 100%;
}
.right-select{
	background-color: #fff;
}
.nav-text{
	height:100upx;
	width: 100%;
	padding:0 4upx 0 8upx;
	line-height: 34upx;
}
.content-box{
	position: absolute;
	top: 200upx;
	bottom: 0;
	width: 100%;
	border-top: 1upx solid #e5e5e5;
}
.nav-select{
	background-color: #fff;
}
.data-title{
	height: 80upx;
	line-height: 80upx;
	border-bottom: 1upx solid #e5e5e5;
	padding-left: 40upx;
	position: relative;
	background-color: #F0F0F0;
	border-left: 1upx solid #fff;
}
.data-title:before{
	content: '';
	position: absolute;
	width: 8upx;
	height: 26upx;
	left: 26upx;
	background-color: #62B6FD;
	top: 27upx;
	z-index: 100;
}
.icon-gouxuan11{ //未选择
	color:#ccc ;
	font-size: 36upx;
}
.isSelect{ //已选择
		color:#4EACFC;
}
.data-check{
	margin-left: 40upx;
	padding-right: 40upx;
	height: 80upx;
	line-height: 80upx;
	border-bottom: 1upx solid #e5e5e5;
}
.count{
	position: absolute;
	width: 20upx;
	height: 20upx;
	line-height: 20upx;
	font-size: 18upx;
	background: red;
	color: #fff;
	right: 30upx;
	top:10upx;
	border-radius: 50%;
}
.check-value{
	max-width: 430upx;
}
/* 2019-12-12 */
	.zc-swiper-tab{border-radius: 0!important;margin-bottom: 0!important;border: none!important;}
	.swiper-tab-list{color: #9B9B9B;width:25%!important;background-color: #FFFFFF;border: none!important;padding: 20upx 0!important;}
	.uni-tab-bar .active{color: #3CA4F9!important;background-color: #FFFFFF;position: relative;text-align: center;}
	.uni-tab-bar .active:after{content: '';position: absolute;width: 25%;height: 5upx;background-color: #3CA4F9;left: 50%;margin-left: -12.5%;bottom: 10upx;border-radius: 3upx;}
	.zc-swiper-tab{
		display: flex;
		border: none !important;
		width: 100%;
	}
	.uni-tab-bar{background-color: #fff;}
	
	/* .first-select{
		flex:1;color: #9B9B9B;width:25%!important;background-color: #FFFFFF;border: none!important;padding: 10upx 0!important ;height: 80upx;

	} */
/* 	.scroll-view2{
		height: 80upx !important;
		width: 100%;
					border-bottom: none;
		justify-content: space-between;
		line-height: 1;
		height: auto;
		box-sizing: border-box;
		margin-bottom: 20upx;
	} */
</style>
